<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-nav-bar
      title="注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 忘记密码表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="phonenumber"
        name="手机号"
        placeholder="注册手机号"
        :rules="rules.phonenumber"
      >
        <i
          slot="left-icon"
          class="iconfont icon-mobile-check"
        ></i>
      </van-field>
      <van-field
        v-model="username"
        type="username"
        name="username"
        placeholder="用户名"
        :rules="rules.username"
      >
        <i
          slot="left-icon"
          class="iconfont icon-tx"
        ></i>
      </van-field>
      <van-field
        v-model="password"
        type="password"
        name="密码"
        placeholder="设置密码"
        :rules="rules.password"
      >
        <i
          slot="left-icon"
          class="iconfont icon-suo"
        ></i>
      </van-field>
      <div style="margin: 16px;">
        <van-button
          round
          block
          native-type="submit"
          color="#71c9ce"
        >立即注册</van-button>
      </div>
    </van-form>

    <!-- 已有账号去登录 -->
    <p
      class="toast"
      @click='login'
    >已有账号,去登录</p>
  </div>

</template>

<script>
function validator (val) {
  return !(val.length < 6)
}
export default {
  name: '',
  components: {

  },
  data () {
    return {
      phonenumber: '',
      username: '',
      password: '',
      testcode: '',
      rules: {
        phonenumber: [{ required: true, message: '手机号不能为空' }, { pattern: /^1[3|5|7|9|8]\d{9}$/, message: '手机号格式错误' }],
        password: [{ required: true, message: '密码不能为空' }, { validator, message: '密码长度过短' }],
        username: [
          { required: true, message: '用户名  不能为空' }
        ]
      }
    }
  },
  mounted () {

  },
  created () {

  },
  methods: {
    // 返回按钮  返回登录页面
    onClickLeft () {
      this.$router.back()
    },
    // 注册按钮
    onSubmit () {
      console.log('点击注册按钮')
      // 点击注册按钮后清空表单跳转至登录页
      this.$router.back()
    },
    // 已有账号去登录按钮
    login () {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.icon-tx,
.icon-suo,
.icon-mobile-check {
  color: #71c9ce;
  margin-right: 20px;
}
/deep/.van-form {
  margin: 0 24px;
}
/deep/ .van-nav-bar__arrow,
/deep/.van-nav-bar__text {
  color: white;
}
.title {
  font-size: 24px;
  color: #71c9ce;
  margin-left: 24px;
}
/deep/.van-form {
  margin: 0 24px;
}
.toast {
  font-size: 14px;
  color: #71c9ce;
}
/deep/.code.van-cell {
  padding-right: 0px;
}
/deep/.van-cell {
  padding: 22px;
}
.toast {
  display: inline-block;
  width: 100%;
  position: fixed;
  bottom: 30px;
  text-align: center;
  color: #487e95;
  font-size: 16px;
}
</style>
